import React, {useState,} from 'react'
import {connect} from 'react-redux'

// 重定向
import {Redirect, withRouter} from "react-router-dom"

// components
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout"
import FormInput from "../../shared-components/FormInput/FormInput"
import FormPwdInput from "../../shared-components/FormPwdInput/FormPwdInput"
import FormTitle from "../../shared-components/FormTitle/FormTitle"
import CustomButton from "../../shared-components/CustomButton/CustomBotton"
import FormCodeInput from "../../shared-components/FormCodeInput/FormCodeInput"

// utils
import {log,} from "../../utils/commonfunc"
import {Toast, WhiteSpace, WingBlank} from "antd-mobile";
import {getRegYZMReq, getYZMReq} from "../../apis/goApis";
import {encryptPwd} from "../../utils/encryptService";


const ForgetPasswordContainer = props => {

    const {history, emitError, isLogin,} = props


    const [mobile, setMobile,] = useState('')
    const [code, setCode,] = useState('')
    const [newPwd, setNewPwd,] = useState('')
    const [newPwdA, setNewPwdA,] = useState('')
    const [codeBtnActive, setCodeBtnActive] = useState(false)
    const [codeSend, setCodeSend] = useState(false)

    // 已登录 跳转
    if (isLogin) {
        return <Redirect to="/"/>
    }

    // 表单验证函数
    const checkBeforeSubmit = ({mobile, newPwd, newPwdA, code,}) => {
        // 检查 用户名 和 密码
        if (mobile.length <= 0 || newPwd.length <= 0) {
            emitError('联系方式和密码不能为空')
            return false
        }
        // 检查手机位数
        // if (mobile.length !== 11) {
        //     emitError('手机号码必须为 11 位数')
        //     return false
        // }
        // 检查手机号码个视
        // if (!(/^1[3456789]\d{9}$/.test(mobile))) {
        //     emitError('手机号码格式有误')
        //     return false
        // }
        // 检查密码位数
        if (newPwd.length < 6) {
            emitError('新密码最少 6 位')
            return false
        }
        // 检查密码与验证密码
        if (newPwd !== newPwdA) {
            emitError('密码不一致')
            return false
        }
        // 检查验证码
        if (code.length <= 0) {
            emitError('验证码不能为空')
            return false
        }
        // 通过验证
        return true
    }

    const onChange = (e, type) => {
        const v = e.target.value
        const o = {
            mobile: setMobile,
            newPwd: setNewPwd,
            newPwdA: setNewPwdA,
            code: setCode,
        }
        if (type === 'mobile') {
            if (v) {
                setCodeBtnActive(true)
            } else {
                setCodeBtnActive(false)
            }
        }
        o[type](v)
    }

    const onSubmit = (e) => {

        e.preventDefault()

        const formData = {
            mobile,
            newPwd,
            newPwdA,
            code,
        }

        const params = {
            mobile,
            yzcode: code,
            newPwd: encryptPwd(newPwd),
        }

        if (checkBeforeSubmit(formData)) {
            props.doForgetPassword(params)
            emptyForm()
        }
    }

    const title = <FormTitle title='忘记密码'/>

    const onCodeBtnClick = () => {

        getYZMReq({mobile, style: 2,})
            .then((res) => {
                if (res.data.ok) {
                    Toast.info('验证码已发送')
                    setCodeSend(true)
                    setCodeBtnActive(false)
                }
            })
    }

    const emptyForm = () => {
        setMobile('')
        setCode('')
        setNewPwd('')
        setNewPwdA('')
        setCodeBtnActive(false)
    }

    const form = (
        <WingBlank>
            <FormInput
                type='text'
                value={mobile}
                onChange={e => onChange(e, 'mobile')}
                placeholder='手机号码/邮箱地址'
            />
            <FormPwdInput
                value={newPwd}
                onChange={(e) => onChange(e, 'newPwd')}
                placeholder='重新设置密码(至少6位数字或英文字母)'
            />
            <FormPwdInput
                value={newPwdA}
                onChange={(e) => onChange(e, 'newPwdA')}
                placeholder='请再次输入新密码'
            />
            <FormCodeInput
                type='text'
                value={code}
                onChange={e => onChange(e, 'code')}
                placeholder='请输入验证码'
                codeBtnActive={codeBtnActive}
                setCodeBtnActive={setCodeBtnActive}
                onCodeBtnClick={onCodeBtnClick}
                codeSend={codeSend}
            />
            <WhiteSpace/>
        </WingBlank>

    )
    const btn = (
        <div style={{marginTop: '2rem',}}>
            <WingBlank>
                <div style={{marginBottom: '15vh',}}>
                    <CustomButton
                        onClick={e => onSubmit(e)}
                        inline='true'
                        shadow='0px 6px 10px 0px rgba(33, 58, 75, 0.4)'
                    >
                        提交
                    </CustomButton>
                </div>
            </WingBlank>
        </div>
    )

    return (
        <div className='fixed-flex-form-container'>
            <GoBackLayout
                history={history}
            >
                {title}
                {form}
                {btn}
            </GoBackLayout>
        </div>
    )
}

const mapState = state => ({
    isLogin: state.global.isLogin,
})

const mapDispatch = ({global: {globalError,}, user: {doForgetPassword,}}) => ({
    emitError: (err) => globalError(err),
    doForgetPassword: (payload) => doForgetPassword(payload),
})

export default connect(mapState, mapDispatch)(ForgetPasswordContainer)
